<!-- 保证文档正常读取 链接一些编写守则 自动差错之类的 -->
<!DOCTYPE html>
<!-- 该元素包含整个页面的内容 也称作根元素 -->
<html>
    <!-- 该元素的内容对用户不可见 其中包含例如面向搜索引擎的关键字、页面描述 css演示表和字符编码申明 -->
    <head>
        <!-- 该元素指定文档使用UTF-8字符编码 -->
        <meta charset="utf-8">
        <title>我的测试界面</title>
        <!-- 链接Css样式 将样式设置链接进该界面 -->
        <link href="styles/style.css" rel="stylesheet">
        <!-- 添加字体的延时 Google -->
        <link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">
        <!-- 添加脚本 -->
        <script src="scripts/main.js" defer></script>
    </head>
    <!-- 主要的内容部分 -->
    <body>
        <!-- 部分元素不需要通过内容来产生效果 因此没有结束标签-->
        <!-- img  alt是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因 是视觉障碍或者某些错误使图像无法显示-->
        <img src="images/test.png" alt="我的测试界面" >
        <p>
            <!-- 在元素内部内容中定义的元素 是嵌套元素-->
            我的猫咪脾气<strong>爆：</strong>
        </p>
        <!-- 标记文本 不要使用标题元素来加大、加粗字体、因为标题对于无障碍访问和搜索引擎优化等问题非常有意义 -->
        <h1>主标题</h1>
        <h2>主标题</h2>
        <h3>主标题</h3>
        <h4>主标题</h4>
        <!-- 段落 -->
        <p>这是一个段落</p>
        <!-- 列表 List -->
        <!-- 无序列表 -->
        <p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的技术人员、思考者和建造者，我们致力于。。。</p>
        <!-- unorder list 无序列表 这里的无序实际上指的是逻辑上的 是一些必要元素的罗列 部分先后-->
        <ul>
            <li>技术人员</li>
            <li>思考者</li>
            <li>建造者</li>
        </ul>
        <p>我们致力于</p>
        <!-- order list 有序列表 而有序列表 是一种重要关系的排序或者说递进 排序是存在逻辑关系的 -->
        <ol>
            <li>技术人员</li>
            <li>思考者</li>
            <li>建造者</li>
        </ol>
        <!-- a -->
        <a>Mozilla 宣言</a>
        <!-- href 超文本引用 -->
        <a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>
        <button>切换用户</button>
    </body>
</html>